<template>
    <div>
        <div>
            <radio-group class='ordered_top'>
                <div class='project' @click="NOChangeShow">
                    <radio checked>洗澡预约</radio>
                </div>
                <div class='project' @click="NOChangeShow">
                    <radio>打针预约</radio>
                </div>
                <div class='project' @click="onChangeShow">
                    <radio>寄养预约</radio>
                </div>
            </radio-group>
        </div>
        <div class='ordered_neir'>

            <div class='ordered_text'>预约时间</div>

            <picker class='ordered_time_text' mode="multiSelector" @change="bindMultiPickerChange" :value="multiIndex" :range="newMultiArray">

                <input type="text" :value="time">
            </picker>

            <div class='fenge'></div>
            <div style='display:flex;'>
                <div>
                    <div class='ordered_text'>联系人</div>
                    <input type='text' class='ordered_name' placeholder='输入内容' />
                </div>
                <div v-if="showyue">
                    <div class='ordered_text'>寄养天数</div>
                    <input type='text' style='width:308rpx;' class="ordered_name " placeholder='输入内容' />
                </div>
            </div>

            <div class='ordered_text'>联系方式</div>
            <input type='text' class='ordered_tel' placeholder='输入内容' />
            <div class='fenge'></div>
            <div class='ordered_pet'>
                <div>
                    <div class='ordered_pet_name'>宠物名称</div>
                    <input class='ordered_pet_text' type='text' placeholder='输入内容' />
                </div>
                <div>
                    <div class='ordered_pet_name'>宠物种类</div>
                    <input class='ordered_pet_text' type='text' placeholder='输入内容' />
                </div>
                <div>
                    <div class='ordered_pet_name'>宠物体重</div>
                    <input class='ordered_pet_text' type='text' placeholder='输入内容' />
                </div>

            </div>
            <div class='fenge'></div>
            <div class='limousine' @click="onChangeShowState">
                <checkbox>是否接送</checkbox>
            </div>
            <input :style="{opacity:tag?'0':'1'}" class="limousine_address" type='text' placeholder='输入地址' />
            <div class='ordered_but'>
                立即预约
            </div>

        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    data() {
        return {
            time: "",
            multiArray: [],
            multiIndex: [0, 0, 0],
            showView: false,
            showyue: false,
            tag: true
        };
    },
    computed: {
        newMultiArray: () => {
            let array = [];
            const date = new Date();
            const years = [];
            const months = [];
            const days = [];
            const hours = [];
            const minutes = [];
            // for (let i = 2018; i <= date.getFullYear() + 10; i++) {
            //     years.push("" + i + "年");
            // }
            // array.push(years);
            for (let i = date.getMonth() + 1; i <= 12; i++) {
                // if (i < 10) {
                //     i = "0" + i;
                // }
                months.push("" + i + "月");
            }
            array.push(months);
            for (let i = date.getDate(); i <= 31; i++) {
                // if (i < 10) {
                //     i = "0" + i;
                // }
                days.push("" + i + "日");
            }
            array.push(days);
            for (let i = 10; i < 21; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                hours.push("" + i + "点");
            }
            array.push(hours);
            // for (let i = 0; i < 60; i++) {
            //     if (i < 10) {
            //         i = "0" + i;
            //     }
            //     minutes.push("" + i);
            // }
            // array.push(minutes);
            return array;
        }
    },
    methods: {
        //获取时间日期
        bindMultiPickerChange(e) {
            this.multiIndex = e.target.value;
            console.log("当前选择的时间", this.multiIndex);
            const index = this.multiIndex;
            // const year = this.newMultiArray[0][index[0]];
            const month = this.newMultiArray[0][index[0]];
            const day = this.newMultiArray[1][index[1]];
            const hour = this.newMultiArray[2][index[2]];
            // const minute = this.newMultiArray[4][index[4]];
            this.time = month + day + " " + hour;
        },
        onChangeShowState: function() {
            var that = this;

            this.tag = !this.tag;
        },
        onChangeShow: function() {
            var that = this;

            that.showyue = true;
        },
        NOChangeShow: function() {
            var that = this;

            that.showyue = false;
        }
    }
};
</script>

<style>
.ordered_top {
    width: 100%;
    height: 112rpx;
    border-bottom: 20rpx solid #fafafa;
    display: flex;
    justify-content: space-between;
}

.ordered_top .project {
    width: 260rpx;
    height: 63rpx;
    margin-top: 40rpx;
    text-align: center;
    font-size: 30rpx;
}

/* .ordered_top .selection {
  width: 130rpx;
  height: 2rpx;
  background: #ff8d1a;
  margin-top: 19rpx;
  margin-left: 24rpx;
} */

/* .ordered_top .seltext {
  color: #ff8d1a;
  font-weight: bold;
} */

.ordered_time_text {
    width: 679rpx;
    height: 60rpx;
    margin-left: 35rpx;
    border-radius: 10rpx;
    font-size: 30rpx;
    border: 1px solid #999;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 34rpx;
    color: #505050;
}

.ordered_text {
    font-size: 28rpx;
    color: #505050;
    margin: 43rpx 0 32rpx 35rpx;
}

.fenge {
    width: 690rpx;
    height: 2rpx;
    background: #f9f9f9;
    margin: 0 auto;
}

.ordered_name {
    width: 319rpx;
    height: 60rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #999;
    margin-left: 35rpx;
    padding-left: 10rpx;
    color: #333;
}

.ordered_tel {
    width: 679rpx;
    height: 60rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #999;
    margin-left: 35rpx;
    padding-left: 10rpx;
    color: #333;
    margin-bottom: 54rpx;
}

.ordered_pet {
    display: flex;
    margin: 35rpx;
    justify-content: space-between;
}

.ordered_pet_name {
    color: #505050;
    font-size: 28rpx;
    margin-bottom: 34rpx;
}

.ordered_pet_text {
    width: 162rpx;
    height: 60rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #999;
    padding-left: 10rpx;
    color: #333;
}

.limousine {
    margin: 35rpx;
}

.limousine checkbox {
    color: #505050;
    font-size: 30rpx;
}

.limousine_address {
    width: 679rpx;
    height: 60rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #999;
    padding-left: 10rpx;
    color: #333;
    margin: 0 auto;
}

.ordered_but {
    width: 651rpx;
    height: 120rpx;
    margin: 0 auto;
    font-size: 32rpx;
    line-height: 120rpx;
    text-align: center;
    border-radius: 101rpx;
    background: #ff8d1a;
    color: #fff;
    margin-top: 49rpx;
    margin-bottom: 30rpx;
}

.hide {
    opacity: 0;
}

.show {
    opacity: 1;
}
</style>
